<template>
  <Layout>
      <Form ref="queryForm" :model="dataToQuery" :label-width="120">
          <Row class="query-form">
              <Col span="8">
                  <FormItem label="二级集团：">
                      <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
                  </FormItem>
              </Col>
              <Col span="8">
                  <FormItem label="企业名称：" prop="companyId">
                      <company-select v-model="dataToQuery.companyName" style="width:100%" />
                      <!-- <div>
                          <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName' :orgTree="true"
                                        :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                      </div> -->
                  </FormItem>
              </Col>
              <Col span="8" v-if="!switchFlag">
                  <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                  <Button @click="reset" class="ivu-btn-reset">重置</Button>
                  <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </Col>
              <Col span="8" v-else>
                  <FormItem label='考核单元号：'>
                      <Input class='query-form-el' type='text' v-model='dataToQuery.unitNo'></Input>
                  </FormItem>
              </Col>
          </Row>
          <Row v-show="switchFlag" class="query-form">

              <Col span="8" offset="16">
                  <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                  <Button @click="reset" class="ivu-btn-reset">重置</Button>
                  <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </Col>
          </Row>
          <Row class="query-form">
              <Col span="24">
                  <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                  <download-button :api="exportUrl" :queryForm="dataToQuery" />
              </Col>
          </Row>
      </Form>
      <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
             :loading='pageStatus.loading' @on-expand="onExpand"
             border :columns="columns1" :data="dataTable">
      </Table>
      <!--分页-->
      <Row style="margin-right:10px;">
          <Col span="24">
              <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                    @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                    show-total show-sizer show-elevator/>
              <!-- <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1" @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator /> -->
          </Col>
      </Row>
      <!--新增、修改、详情-->
      <Modal :title="'治安保卫基础管理台账'" :transfer=false :mask-closable="false"
             v-model="dialogShow" v-if="dataToView && dialogShow" :width=850 class-name='limit-height-dialog'>
          <Row>
              <Col span="24">
                  <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
                        :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                        :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?140:null">
                      <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="11">
                              <FormItem label='企业名称：' prop='companyId'>
                                  <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId="dataToView.companyId"
                                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                              </FormItem>
                          </Col>
                          <Col span="11">
                              <FormItem label='考核单元号：' prop='unitNo'>
                                  <div v-if="mode === 'view'">{{ dataToView.unitNo }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写考核单元号" type='text' v-model='dataToView.unitNo'></Input>
                              </FormItem>
                          </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="23">
                              <FormItem label='所在地址' prop='location'>
                                  <div v-if="mode === 'view'">{{ dataToView.location }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写所在位置" type='text' maxlength="100" show-word-limit v-model='dataToView.location'></Input>
                              </FormItem>
                          </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                              <FormItem label='治安保卫工作主管领导：' prop='leaderCharge'>
                                  <div v-if="mode === 'view'">{{ dataToView.leaderCharge }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写治安保卫工作主管领导" type='text' maxlength="10" show-word-limit v-model='dataToView.leaderCharge'></Input>
                              </FormItem>
                          </Col>
                        <Col span="11">
                          <FormItem label='主管领导联系电话：' prop='leaderPhone'>
                            <div v-if="mode === 'view'">{{ dataToView.leaderPhone }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写主管领导联系电话" v-model='dataToView.leaderPhone'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                          <FormItem label='治安保卫主管部门：' prop='department'>
                            <div v-if="mode === 'view'">{{ dataToView.department }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写治安保卫主管部门" type='text' maxlength="100" show-word-limit v-model='dataToView.department'></Input>
                          </FormItem>
                        </Col>
                         <Col span="11">
                          <FormItem label='主管部门负责人：' prop='departmentBy'>
                            <div v-if="mode === 'view'">{{ dataToView.departmentBy }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写主管部门负责人" type='text' maxlength="10" show-word-limit v-model='dataToView.departmentBy'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                          <FormItem label='负责人联系电话：' prop='departmentPhone'>
                            <div v-if="mode === 'view'">{{ dataToView.departmentPhone }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写负责人联系电话" type='text' v-model='dataToView.departmentPhone'></Input>
                          </FormItem>
                        </Col>
                        <Col span="11">
                          <FormItem label='治安保卫组织机构建立情况：' prop='buildDesc'>
                            <div v-if="mode === 'view'">{{ dataToView.buildDesc }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写治安保卫组织机构建立情况" type='text' maxlength="100" show-word-limit v-model='dataToView.buildDesc'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                          <FormItem label='专兼职治安保卫人员数量：' prop='personNum'>
                            <div v-if="mode === 'view'">{{ dataToView.personNum }}</div>
                            <InputNumber v-else class='query-form-el' placeholder="请填写专兼职治安保卫人员数量" :min="0" type='text' v-model='dataToView.personNum'></InputNumber>
                          </FormItem>
                        </Col>
                        <Col span="11">
                          <FormItem label='采取的主要安全防范措施：' prop='precaution'>
                            <div v-if="mode === 'view'">{{ dataToView.precaution }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写采取的主要安全防范措施" type='text' maxlength="100" show-word-limit v-model='dataToView.precaution'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                          <FormItem label='企业是否设置治安监控室：' prop='ifMonitor'>
                            <div v-if="mode === 'view'">{{ dataToView.ifMonitor }}</div>
                            <!-- <Input v-else class='query-form-el' placeholder="请填写企业是否设置治安监控室" v-model='dataToView.ifMonitor'></Input> -->
                            <Select v-else v-model='dataToView.ifMonitor' class='query-form-el'>
                              <Option value="1">是</Option>
                              <Option value="2">否</Option>
                            </Select>
                          </FormItem>
                        </Col>
                        <Col span="11">
                          <FormItem label='治安监控摄像头数量：' prop='monitorNum'>
                            <div v-if="mode === 'view'">{{ dataToView.monitorNum }}</div>
                            <InputNumber v-else class='query-form-el' placeholder="请填写治安监控摄像头数量" :min="0" type='text' v-model='dataToView.monitorNum'></InputNumber>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                          <FormItem label='保安员队伍情况：' prop='securityTeamDesc'>
                            <div v-if="mode === 'view'">{{ dataToView.securityTeamDesc }}</div>
                            <!-- <Input v-else class='query-form-el' placeholder="请填写保安员队伍情况" v-model='dataToView.securityTeamDesc'></Input> -->
                            <Select v-else v-model='dataToView.securityTeamDesc' class='query-form-el'>
                              <Option value="1">企业员工</Option>
                              <Option value="2">外聘</Option>
                            </Select>
                          </FormItem>
                        </Col>
                        <Col span="11">
                          <FormItem label='保安员数量（人）：' prop='securityNum'>
                            <div v-if="mode === 'view'">{{ dataToView.securityNum }}</div>
                            <InputNumber v-else class='query-form-el' placeholder="请填写保安员数量（人）" :min="0" type='text' v-model='dataToView.securityNum'></InputNumber>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                          <FormItem label='企业治安保卫主要风险因素描述：' prop='riskDesc'>
                            <div v-if="mode === 'view'">{{ dataToView.riskDesc }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写企业治安保卫主要风险因素描述" :autosize="{minRows: 2,maxRows: 5}" type='textarea' maxlength="200" show-word-limit v-model='dataToView.riskDesc'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                          <FormItem label='企业治安保卫工作存在的突出矛盾或问题：' prop='existProblem'>
                            <div v-if="mode === 'view'">{{ dataToView.existProblem }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写企业治安保卫工作存在的突出矛盾或问题" :autosize="{minRows: 2,maxRows: 5}" type='textarea' maxlength="200" show-word-limit v-model='dataToView.existProblem'></Input>
                          </FormItem>
                        </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                          <FormItem label='备注：' prop='remark'>
                            <div v-if="mode === 'view'">{{ dataToView.remark }}</div>
                            <Input v-else class='query-form-el' placeholder="请填写备注" :autosize="{minRows: 2,maxRows: 5}" type='textarea' maxlength="200" show-word-limit v-model='dataToView.remark'></Input>
                          </FormItem>
                        </Col>
                      </Row>

                      <Row>
                          <Col span="23" class="query-form" style="margin-left: 15px">
                              <Button v-if="mode !== 'view'" class="ivu-btn-add" icon="md-add"
                                      @click="itemModel=true,itemAdd=true;detailItem={storageNum:0}">新增防范部位和储存物品信息</Button>
                              <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350" :columns="itemColumn"
                                     :data="dataToView.items">
                              </Table>
                          </Col>
                      </Row>

                      <Row type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="治安保卫管理制度建立情况：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="治安保卫管理制度建立情况：" prop="idFiles">
                                    <div>
                                        <Upload ref="治安保卫管理制度建立情况"
                                                :before-upload="(file) => { beforeUpload1(file, 'id', 'securityProtectionManage/1') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')"
                                         :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'securityProtectionManage/1')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="突发事件应急预案：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="突发事件应急预案：" prop="idFiles">
                                    <div>
                                        <Upload ref="突发事件应急预案"
                                                :before-upload="(file) => { beforeUpload1(file, 'id', 'securityProtectionManage/2') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')"
                                         :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'securityProtectionManage/2')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                      <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="11">
                              <FormItem label='填报人：' prop='createUserName'>
                                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                                         v-model='dataToView.createUserName'></Input>
                              </FormItem>
                          </Col>
                          <Col span="11">
                              <FormItem label='填报时间：' prop='createDate'>
                                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                  <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                                              v-model='dataToView.createDate'></DatePicker>
                              </FormItem>
                          </Col>
                      </Row>
                  </Form>
              </Col>
          </Row>
          <div slot="footer">
              <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
              <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
              <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
          </div>
      </Modal>

      <Modal :mask-closable="false" :transfer=false v-model="itemModel" :width=600 title="建筑详情"
             @on-cancel="itemModel=false,detailItem={}">
          <Row>
              <Col span="24">
                  <Form ref="itemForm" :class="'modal-form'" :show-message="false" :model="detailItem"
                        :rules="itemRuleCustom" label-position="top" >
                      <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="23">
                              <FormItem label='治安重点防范部位：' prop='securityMeasures'>
                                  <div v-if="mode === 'view'">{{ detailItem.securityMeasures }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写治安重点防范部位" type='text' v-model='detailItem.securityMeasures'></Input>
                              </FormItem>
                          </Col>
                      </Row>
                      <Row type="flex" justify="space-around" class="code-row-bg">
                          <Col span="23">
                              <FormItem label='主要储存物品名称和数量：' prop='storageName'>
                                  <div v-if="mode === 'view'">{{ detailItem.storageName }}</div>
                                  <Input v-else class='query-form-el' placeholder="请填写主要储存物品名称和数量：" type='text' maxlength="200" show-word-limit v-model='detailItem.storageName'></Input>
                              </FormItem>
                          </Col>
                          <!-- <Col span="11">
                              <FormItem label='储存物品数量：' prop='storageNum'>
                                  <div v-if="mode === 'view'">{{ detailItem.storageNum }}</div>
                                  <InputNumber v-else class='query-form-el' placeholder="请填写储存物品数量" :min="0" type='text' v-model='detailItem.storageNum'></InputNumber>
                              </FormItem>
                          </Col> -->
                      </Row>
                  </Form>
              </Col>
          </Row>
          <div slot="footer">
              <Button type="primary" class='ivu-btn-save' @click="itemSubmit('itemForm')">确定</Button>
              <Button type="primary" class='ivu-btn-cancel' @click="itemModel=false,detailItem={}">取消</Button>
              <!--<Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>-->
          </div>
      </Modal>


  </Layout>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {sessionStorage} from '@/common/cacheUtils.js';
  import {formatDate} from '@/tools/index'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'

  export default {
      components: {cascaderDom},
      data() {
          return {
              ...this.createCommonDataField(),
              columns1: [
                  {type:'expand', width:30,
                      fixed: 'left',
                      _disableExpand:true,
                      render:(h,params)=>{
                          return h('Table',{
                              props: {
                                  columns: [
                                      { key:'securityMeasures',title: '治安重点防范部位',  align: 'center', minWidth: 120,  },
                                      { key:'storageName',title: '主要储存物品名称和数量',  align: 'center', minWidth: 120,  },
                                      // { key:'storageNum',title: '储存物品数量',  align: 'center', minWidth: 120,  },
                                  ],//表头
                                  data: params.row.items,//内部表格展示的数据
                              },
                          })//我这里使用的是表格，大家也可以根据自己的实际情况更换别的组件
                      }
                  },
                  {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                  { key:'companyName',title: '单位名称',  align: 'center', minWidth: 120,  },
                  { key:'unitNo',title: '考核单元号',  align: 'center', minWidth: 120,  },
                  { key:'leaderCharge',title: '治安保卫工作主管领导',  align: 'center', minWidth: 120,  },
                  { key:'location',title: '所在位置',  align: 'center', minWidth: 120,  },
                  { key:'leaderPhone',title: '主管领导联系电话',  align: 'center', minWidth: 120,  },
                  { key:'department',title: '治安保卫主管部门',  align: 'center', minWidth: 120,  },
                  { key:'departmentBy',title: '主管部门负责人',  align: 'center', minWidth: 120,  },
                  { key:'departmentPhone',title: '负责人联系电话',  align: 'center', minWidth: 120,  },
                  { key:'buildDesc',title: '治安保卫组织机构建立情况',  align: 'center', minWidth: 120,  },
                  { key:'personNum',title: '专兼职治安保卫人员数量',  align: 'center', minWidth: 120,  },
                  { key:'precaution',title: '采取的主要安全防范措施',  align: 'center', minWidth: 120,  },
                  { key:'ifMonitor',title: '企业是否设置治安监控室',  align: 'center', minWidth: 120,
                    render: (h, params) => { return h('span', params.row.ifMonitor == '1' ? '是' : '否')}},
                  { key:'monitorNum',title: '治安监控摄像头数量',  align: 'center', minWidth: 120,  },
                  { key:'securityTeamDesc',title: '保安员队伍情况',  align: 'center', minWidth: 120, 
                     render: (h, params) => { return h('span', params.row.securityTeamDesc == '1' ? '企业员工' : '外聘')}},
                  { key:'securityNum',title: '保安员数量（人）',  align: 'center', minWidth: 120,  },
                  { key:'riskDesc',title: '企业治安保卫主要风险因素描述',  align: 'center', minWidth: 120,  },
                  { key:'existProblem',title: '企业治安保卫工作存在的突出矛盾或问题',  align: 'center', minWidth: 120,  },
                  // { key:'remark',title: '备注',  align: 'center', minWidth: 120,  },

                  this.getActionColumns()
              ],
              ruleCustom: {
                  companyId: [ { required: true, message: '请填写单位名称', trigger: 'change',}],
                  unitNo: [ { required: true, message: '请填写考核单元号', trigger: 'change',}],
                  leaderCharge: [ { required: true, message: '请填写治安保卫工作主管领导', trigger: 'change',}],
                  location: [ { required: true, message: '请填写所在位置', trigger: 'change',}],
                  leaderPhone: [ { pattern: /^1[0-9]{10}$/,required: true, message: '请填写主管领导联系电话', trigger: 'change',}],
                  department: [ { required: true, message: '请填写治安保卫主管部门', trigger: 'change',}],
                  departmentBy: [ { required: true, message: '请填写主管部门负责人', trigger: 'change',}],
                  departmentPhone: [ { pattern: /^1[0-9]{10}$/,required: true, message: '请填写负责人联系电话', trigger: 'change',}],
                  buildDesc: [ { required: true, message: '请填写治安保卫组织机构建立情况', trigger: 'change',}],
                  personNum: [ { required: true, message: '请填写专兼职治安保卫人员数量', trigger: 'change',type:'number'}],
                  precaution: [ { required: true, message: '请填写采取的主要安全防范措施', trigger: 'change',}],
                  ifMonitor: [ { required: true, message: '请填写企业是否设置治安监控室', trigger: 'change',}],
                  monitorNum: [ { required: true, message: '请填写治安监控摄像头数量', trigger: 'change',type:'number'}],
                  securityTeamDesc: [ { required: true, message: '请填写保安员队伍情况', trigger: 'change',}],
                  securityNum: [ { required: true, message: '请填写保安员数量（人）', trigger: 'change',type:'number'}],
                  riskDesc: [ { required: true, message: '请填写企业治安保卫主要风险因素描述', trigger: 'change',}],
                  existProblem: [ { required: true, message: '请填写企业治安保卫工作存在的突出矛盾或问题', trigger: 'change',}],
                  // remark: [ { required: true, message: '请填写备注', trigger: 'change',}],
                  idFiles: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles.filter(t=>t.field==='1').length < 1||
                                this.dataToView.idFiles.filter(t=>t.field==='2').length < 1) {
                                callback('附件必须上传')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }]
              },
              tableHeight: 10,
              dictMap:{},
              detailItem:{},
              itemModel:false,
              itemAdd:false,
              columns2: [
                  {title: '序号', width: 70, align: 'center', render: this.indexColumnsRender},
                  { key:'securityMeasures',title: '治安重点防范部位',  align: 'center', minWidth: 120,  },
                  { key:'storageName',title: '主要储存物品名称和数量',  align: 'center', minWidth: 120,  },
                  // { key:'storageNum',title: '储存物品数量',  align: 'center', minWidth: 120,  },
                  {
                      title: '操作',
                      key: 'action',
                      fixed: 'right',
                      width: 110,
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '13px',},
                                  on: {
                                      click: () => {
                                          this.detailItem = {...params.row}
                                          this.itemModel = true
                                          this.itemAdd = false
                                      }
                                  }
                              }, '修改'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '13px',color: 'red'},
                                  on: {
                                      click: () => {
                                          this.dataToView.items.splice(params.index,1)
                                      }
                                  }
                              }, '删除'),
                          ])
                      }
                  }
              ],
              itemRuleCustom: {
                  securityMeasures: [ { required: true, message: '请填写治安重点防范部位', trigger: 'change',}],
                  // storageNum: [ { required: true, message: '请填写储存物品数量', trigger: 'change',type:'number'}],
                  storageName: [ { required: true, message: '主要储存物品名称和数量', trigger: 'change'}],
              },
              // api
              exportUrl: Api.exportHighBuildingRegistration.replace('highBuildingRegistration','securityProtectionManage'),
              queryUrl: Api.queryHighBuildingRegistration.replace('highBuildingRegistration','securityProtectionManage'),
              deleteUrl: Api.deleteHighBuildingRegistration.replace('highBuildingRegistration','securityProtectionManage'),
              updateUrl: Api.updateHighBuildingRegistration.replace('highBuildingRegistration','securityProtectionManage'),
              saveUrl: Api.saveHighBuildingRegistration.replace('highBuildingRegistration','securityProtectionManage'),
              buttonLoading: false,

          }
      },
      computed: {
          itemColumn() {
              const columns = [...this.columns2];
              const columns1 = []
              columns.forEach(item => {
                  if (this.mode !== 'view') {
                      columns1.push(item)
                  } else {
                      if (item.key !== 'action') {
                          columns1.push(item)
                      }
                  }
              })
              return columns1
          },
      },
      async mounted() {
          this.setTableHeight();
          // await this.$http.get(Api.queryDictBycode+"env-00018",{}).then((res)=>{
          //     this.dictMap = {
          //         'categoryList': res.data.data['env-00018'],
          //     }
          // }).catch(e => {
          //     this.$Message.error("数据字典获取失败")
          // });
          this.query();
      },
      methods: {
          ...pageCommonFunction,
          itemSubmit(name){
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      this.$Modal.confirm({
                          title: '提示',
                          content: '<p>是否要提交？</p>',
                          onOk: () => {
                              let _this = this
                              _this.dataToView.items.splice()
                              if (_this.itemAdd) {
                                  _this.dataToView.items.push(_this.detailItem)
                              } else {
                                  _this.dataToView.items[_this.detailItem._index]= _this.detailItem
                              }
                              _this.itemModel = false
                          },
                          onCancel: () => {}
                      })
                  }else {
                      this.$Message.error('请填报完整!');
                  }
              })
          },

          deleteData(params) {
              this.deleteDateAjax(params);
          },
          query() {

              this.queryAjax();
          },
          submit(name) {
              // if (this.dataToView.staffNumber == '') this.dataToView.staffNumber = 0;
              if (this.dataToView.items.length < 1) {
                  this.$Message.warning('防范部位和储存物品信息至少填报一条');
              } else {
                  this.submitAjaxValidateField(name);
              }
          },
          async beforeEditDialogOpen(data) {
              // data.row.hazardousWorkItemArr = data.row.hazardousWorkItems?data.row.hazardousWorkItems.split(','):[]
          },
          async beforeViewDialogOpen(data) {
              // data.row.hazardousWorkItemArr = data.row.hazardousWorkItems?data.row.hazardousWorkItems.split(','):[]
          },
          createEmptyDataToAdd() {
              return {
                  personNum: 0,
                  monitorNum: 0,
                  securityNum: 0,
                  id: this.get_uuid(),
                  idFiles: [],
                  items: [],
              }
          },
          async afterDataToViewInit() {
              await this.getFiles1('id', 'securityProtectionManage');
          },

      }
  }
</script>

<style lang='css' scoped>
  @import '../../../index.css';
</style>
